<template>
	<view class="article">
		<view class="article-title">{{ article.title }}</view>
		<uni-list :border="false">
			<uni-list-item thumbSize="lg" :thumb="'/static/logo.png'">
				<!-- 通过body插槽定义作者信息内容 -->
				<view slot="body" class="header-content">
					<view class="uni-title">{{config.about.appName}}</view>
				</view>
				<view slot="footer" class="footer">
					<view class="uni-note">更新于 <text>{{article.publish_date}}</text>
					</view>
				</view>
			</uni-list-item>
		</uni-list>
		<view class="banner">
			<!-- 文章开头，缩略图 -->
			<image class="banner-img" :src="article.avatar" mode="widthFix"></image>
			<!-- 文章摘要 -->
			<view class="banner-title">
				<text class="uni-ellipsis">{{article.excerpt}}</text>
			</view>
		</view>
		<view class="article-content">
			<mp-html :content="article.content"></mp-html>
		</view>
	</view>
</template>

<script>
	import uniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js';
	import appConfig from '@/app.config.js';
	var that
	export default {
		data() {
			return {
				// 当前显示 _id
				id: "",
				article: {
					title: ""
				},
				config: appConfig
			}
		},
		onLoad(event) {
			that = this
			//获取真实新闻id，通常 id 来自上一个页面
			if (event.id) {
				this.id = event.id
			}
		},
		onNavigationBarButtonTap(event) {
			if (event.type == 'share') {
				this.shareClick();
			}
		},
		onReady() {
			if (this.id) { // ID 不为空，则发起查询
				this.loadData()
			} else {
				uni.showToast({
					icon: 'none',
					title: '出错了，ID为空'
				})
			}
		},
		methods: {
			loadData() {
				uni.showLoading({
					title: "加载中..."
				})
				uni.vk.callFunction({
					url: 'client/articles/pub/detail',
					data: {
						_id: this.id
					},
					success(data) {
						that.article = data.data
						uni.setNavigationBarTitle({
							title: data.data.title
						})
						uni.hideLoading()
					},
					fail() {
						uni.hideLoading()
					}
				});
			},
			/**
			 * 分享该文章
			 */
			shareClick() {
				let {
					_id,
					title,
					excerpt,
					avatar
				} = this.article
				uniShare({
					content: { //公共的分享类型（type）、链接（herf）、标题（title）、summary（描述）、imageUrl（缩略图）
						type: 0,
						href: appConfig.h5.url +
							`/#/uni_modules/uce-article/pages/detail?id=${_id}&title=${title}`,
						title: this.title,
						summary: excerpt,
						imageUrl: avatar +
							'?x-oss-process=image/resize,m_fill,h_100,w_100' //压缩图片解决，在ios端分享图过大导致的图片失效问题
					},
					menus: [{
							"img": "/static/app-plus/sharemenu/wechatfriend.png",
							"text": "微信好友",
							"share": {
								"provider": "weixin",
								"scene": "WXSceneSession"
							}
						},
						{
							"img": "/static/app-plus/sharemenu/wechatmoments.png",
							"text": "微信朋友圈",
							"share": {
								"provider": "weixin",
								"scene": "WXSenceTimeline"
							}
						},
						{
							"img": "/static/app-plus/sharemenu/weibo.png",
							"text": "微博",
							"share": {
								"provider": "sinaweibo"
							}
						},
						{
							"img": "/static/app-plus/sharemenu/qq.png",
							"text": "QQ",
							"share": {
								"provider": "qq"
							}
						},
						{
							"img": "/static/app-plus/sharemenu/copyurl.png",
							"text": "复制",
							"share": "copyurl"
						},
						{
							"img": "/static/app-plus/sharemenu/more.png",
							"text": "更多",
							"share": "shareSystem"
						}
					],
					cancelText: "取消分享",
				}, e => { //callback
					console.log(e);
				})
			},
		}
	}
</script>

<style scoped>
	.header-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 14px;
	}

	/* 标题 */
	.uni-title {
		display: flex;
		/* margin-bottom: 5px; */
		font-size: 14px;
		font-weight: bold;
		color: #3b4144;
	}

	/* 描述 额外文本 */
	.uni-note {
		color: #999;
		font-size: 12px;

		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}

	.footer {
		display: flex;
		align-items: center;
	}

	.footer-button {
		display: flex;
		align-items: center;
		font-size: 12px;
		height: 30px;
		color: #fff;
		background-color: #ff5a5f;
	}

	.banner {
		position: relative;
		margin: 0 15px;
		height: 180px;
		overflow: hidden;
	}

	.banner-img {
		position: absolute;
		width: 100%;
	}

	.banner-title {
		display: flex;
		align-items: center;
		position: absolute;
		padding: 0 15px;
		width: 100%;
		bottom: 0;
		height: 30px;
		font-size: 14px;
		color: #fff;
		background: rgba(0, 0, 0, 0.4);
		overflow: hidden;
		box-sizing: border-box;
	}

	.uni-ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.article-title {
		padding: 20px 15px;
		padding-bottom: 0;
		font-weight: bold;
		font-size: 18px;
	}

	.article-content {
		padding: 15px;
		font-size: 15px;
		overflow: hidden;
	}
</style>
